<template>
  <div class="title">表单组件</div>
  <div class="items" ref="leftRef">
    <div class="item leftItem" v-for="(item, i) in formComponents" :key="'formComponents' + i"
      @click="addFormComponentsByClick(i)">
      <span class="iconfont" :class="[item.icon]"></span>
      <p>{{ item.name }}</p>
    </div>
  </div>
</template>
<script lang="ts" setup>import { useDesigner } from '../useDesigner';
import { formComponentsType, formComponents } from '../components'
import { nextTick, onMounted, ref } from 'vue';
//@ts-ignore
import Sortable from 'sortablejs';
export interface centerFormProps {
  formArray: formComponentsType[],
  leftDragIndex: number
}
const props = withDefaults(defineProps<centerFormProps>(), {});
const emit = defineEmits(['update:leftDragIndex', 'update:centerDargBgColor'])

const { addFormComponents } = useDesigner();
const leftRef = ref()
//点击添加
const addFormComponentsByClick = (index: number) => {
  addFormComponents(props.formArray.length, formComponents[index] as formComponentsType, props.formArray)
}
onMounted(() => {
  nextTick(() => {
    const sortLeft = new Sortable(leftRef.value, {
      group: {
        name: 'components',
        pull: 'clone',
        put: false // 不允许拖拽进这个列表
      },
      animation: 150,
      sort: false, // 设为false，禁止sort
      onStart: function (evt: any) {
        emit('update:leftDragIndex', evt.oldIndex)
        emit('update:centerDargBgColor', 'var(--global-checked-color)')
      },
    });
  })
})
</script>